import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, } from '@angular/router';

import { environment } from '../../../../environments/environment';

import { BlogArticle } from '../../class/blog-article';
import { BlogArticleCategory } from '../../class/blog-article-category';
import { BlogService } from '../../service/blog.service';

declare var $: any;

@Component({
  selector: 'app-blog-edit',
  templateUrl: './blog-edit.component.html',
  styleUrls: ['./blog-edit.component.css']
})
export class BlogEditComponent implements OnInit {
  // 文章
  article: BlogArticle = new BlogArticle();
  // 文章是否存在
  articleExists: boolean = false;
  // 新文章分类
  newArticleCategory: string = "";
  // 新文章分类是否存在
  newArticleCategoryExists: boolean = false;
  // 所有文章分类
  allArticleCategorys: BlogArticleCategory[] = [];
  // 编辑器配置
  ckeditorConfig: any = { toolbarGroups : [
      { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
      { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
      { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
      { name: 'forms', groups: [ 'forms' ] },
      { name: 'styles', groups: [ 'styles' ] },
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
      { name: 'links', groups: [ 'links' ] },
      { name: 'insert', groups: [ 'insert' ] },
      { name: 'colors', groups: [ 'colors' ] },
      { name: 'tools', groups: [ 'tools' ] },
      { name: 'others', groups: [ 'others' ] },
      { name: 'about', groups: [ 'about' ] }
    ] };

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private blogService: BlogService
  ) { }

  ngOnInit() {
    let bindThis = this;
    bindThis.getArticle();
    bindThis.getAllArticleCategorys();
  }

  private getArticle() {
    let bindThis = this;
    const id = this.activatedRoute.snapshot.paramMap.get("id");
    this.blogService.queryArticleById(Number(id), (result) => {
      if (result.code == "200") {
        bindThis.article = result.data;
      }
    });
  }

  /**
   *  添加文章分类
   * */
  addArticleCategory() {
    let bindThis = this;
    let newArticleCategory = bindThis.newArticleCategory;
    bindThis.blogService.existsArticleCategory(bindThis.newArticleCategory, (result) => {
      if (result.data === true) {
        bindThis.newArticleCategoryExists = true;
        setTimeout(() => { bindThis.newArticleCategoryExists = false; }, 2000);
      } else {
        let category: BlogArticleCategory = new BlogArticleCategory();
        category.categoryName = newArticleCategory;
        bindThis.blogService.addArticleCategory(category, (result) => {
          if (result.code == 200) {
            bindThis.getAllArticleCategorys();
            $("#addCategoryModal").modal("hide");
            $("#addCategoryModal form")[0].reset();
            bindThis.newArticleCategory = "";
          }
        });
      }
    });
  }

  /**
   *  获取所有文章分类
   * */
  private getAllArticleCategorys() {
    let bindThis = this;
    bindThis.blogService.queryAllArticleCategorys((result) => {
      if (result.code == 200) {
        bindThis.allArticleCategorys = result.data.pageData;
      }
    });
  }

  /**
   *  保存文章
   * */
  updateArticle() {
    let bindThis = this;
    let article = bindThis.article;
    let description = "";
    article.articleDescription = description.substring(0, Math.min(117, description.length)) + "...";
    bindThis.blogService.existsArticle(article.articleName, article.articleId, (result) => {
      if (result.data === true) {
        bindThis.articleExists = true;
        setTimeout(() => { bindThis.articleExists = false; }, 2000);
      } else {
        bindThis.blogService.updateArticleById(article.articleId, article, (result) => {
          if (result.code == 200) {
            // 跳转到详情页
            bindThis.router.navigate(["blog", article.articleId]);
          }
        });
      }
    });
  }
}
